<template>
  <div class="out_box">
     <el-tree :data="categories" empty-text="暂无数据"   @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
import {getCategories} from '../api/Categories/Categories'
import {globalBus} from '../eventbus/globalBus'
export default {
  
    components :{
  },
  name: 'Categories',
  props: [],
   data() {
      return {
        //引用element-ui的el-tree组件，删除掉defaultProps属性，避免影响数据初始化
        //数据结构要严格按照官方所示的treeNode结构返回
        categories: []
      }
    },
    methods: {
      handleNodeClick(data) {
         globalBus.$off("cid",data.id)
        globalBus.$emit("cid",data.id)
      },
      loadCategories()
      {
        let _this=this
         getCategories().then((res)=>{
           if(res.flag){
            this.categories=res.data
           }
         })
      }
    },
    created()
    {
        this.loadCategories();
    }
}
</script>


<style  scoped>

.out_box
{
width: 150px;
border-radius: 15px;

}
.el-tree
{
background:orange;
}

</style>
